<template>
  <el-container>
    <el-header style="height:70px">
      <div id="head">
        <div id="left" style="line-height:70px">
          <h1 style="margin:0px">
            &nbsp;&nbsp;&nbsp; <b>物业后台<span style="color:blue">管理系统</span></b>
          </h1>
        </div>
        <div id="right" style="line-height:70px">
          <div id="right1">
            <svg t="1662371413255" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="2121" width="30" height="30" style="margin-top:20px">
              <path
                  d="M553.3184 160.1536v703.744L338.6368 716.8l-13.056-8.96H161.1776A7.68 7.68 0 0 1 153.6 700.2112V323.7888c0-4.1984 3.4304-7.5776 7.5776-7.5776h164.4032L338.6368 307.2l214.6816-147.0464M560.4352 102.4a43.3664 43.3664 0 0 0-24.7296 7.7824L309.7088 264.96H161.1776C128.7168 264.96 102.4 291.328 102.4 323.7888v376.4736c0 32.4608 26.3168 58.7776 58.7776 58.7776h148.5312l225.9456 154.7776a44.032 44.032 0 0 0 68.864-36.3008V146.4832A44.032 44.032 0 0 0 560.4352 102.4zM699.6992 417.792a25.6 25.6 0 0 0-4.8128 35.8912c10.6496 13.8752 16.2304 30.5664 16.2304 48.128 0 17.664-5.632 34.3552-16.3328 48.2816a25.6 25.6 0 0 0 40.6016 31.232c17.664-22.9376 26.9312-50.432 26.9312-79.4624 0-28.928-9.2672-56.32-26.7264-79.2576a25.6512 25.6512 0 0 0-35.8912-4.8128z"
                  fill="#212121" p-id="2122"></path>
              <path
                  d="M800.4608 304.5376a25.6 25.6 0 1 0-23.1936 45.6704A169.216 169.216 0 0 1 870.4 501.8112a169.216 169.216 0 0 1-93.0304 151.552 25.5488 25.5488 0 1 0 23.1936 45.6192A220.16 220.16 0 0 0 921.6 501.8112a220.3136 220.3136 0 0 0-121.1392-197.2736z"
                  fill="#212121" p-id="2123"></path>
            </svg>
          </div>

          <div id="right2">
            <span>&nbsp;&nbsp;欢迎</span>

          </div>

          <div id="right3" @mouseenter="footerEnter()" @mouseleave="footerLeave()">
            <div id="right31">
              <svg t="1662371528637" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="2261" width="30" height="30" style="margin-top:20px">
                <path
                    d="M512 504.832a194.3552 194.3552 0 1 0 0-388.7104 194.3552 194.3552 0 0 0 0 388.7104zM614.4 549.4784H409.6a307.2 307.2 0 0 0-307.2 307.2 51.2 51.2 0 0 0 51.2 51.2h716.8a51.2 51.2 0 0 0 51.2-51.2 307.2 307.2 0 0 0-307.2-307.2z"
                    fill="#070707" p-id="2262"></path>
              </svg>
            </div>
            <div id="right32">
              <span>admin</span>

            </div>
            <div id="right33" :style="active1">
              <svg t="1662372336687" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="928" width="20" height="20" maigin-top="30px">
                <path
                    d="M512 682.666667c-10.666667 0-21.333333-4.266667-29.866667-12.8l-256-256c-17.066667-17.066667-17.066667-42.666667 0-59.733334 17.066667-17.066667 42.666667-17.066667 59.733334 0L512 580.266667l226.133333-226.133334c17.066667-17.066667 42.666667-17.066667 59.733334 0 17.066667 17.066667 17.066667 42.666667 0 59.733334l-256 256c-8.533333 8.533333-19.2 12.8-29.866667 12.8z"
                    fill="#333333" p-id="929"></path>
              </svg>
            </div>
            <div id="right34" :style="active">
              <svg t="1662373347483" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="1117" width="20" height="20">
                <path
                    d="M768 682.666667c-10.666667 0-21.333333-4.266667-29.866667-12.8L512 443.733333 285.866667 669.866667c-17.066667 17.066667-42.666667 17.066667-59.733334 0-17.066667-17.066667-17.066667-42.666667 0-59.733334l256-256c17.066667-17.066667 42.666667-17.066667 59.733334 0l256 256c17.066667 17.066667 17.066667 42.666667 0 59.733334-8.533333 8.533333-19.2 12.8-29.866667 12.8z"
                    fill="#333333" p-id="1118"></path>
              </svg>
            </div>

          </div>
        </div>
        <div id="mid">
          <el-breadcrumb style="line-height:70px;" separator="/">
            <el-breadcrumb-item :to="{ path: '/' }" class="size">
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;物业管理
            </el-breadcrumb-item>
            <el-breadcrumb-item class="size"><a href="/">活动管理</a></el-breadcrumb-item>
            <el-breadcrumb-item class="size"><a href="/">物联设备</a></el-breadcrumb-item>
            <el-breadcrumb-item class="size"><a href="/">app运维</a></el-breadcrumb-item>
            <el-breadcrumb-item class="size"><a href="/">更多待续</a></el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </el-header>
    <el-container style="height:700px">
      <el-aside width="220px">
        <el-col :span="12">
          <el-menu default-active="2" class="el-menu-vertical-demo" style="width:220px" :router="true">
            <div>
              <el-menu-item index="/index/Index1" style="padding:0px 30px 0px 10px">
                <i style="margin-right: 8px" class="wys- wys-zhuye"></i>
                首页
              </el-menu-item>
              <!-- <el-submenu v-for="menu in menus" :index="menu.orderNum+'-' ">
                <template slot="title">
                  <i style="margin-right: 8px" :class="'wys- '+menu.icon"></i>
                  <span>{{ menu.menuName }}</span>
                </template>
                <el-menu-item-group v-for="sonMenu in menu.subMenu">
                  <el-menu-item :index="sonMenu.url">
                    <i style="margin-left: 28px;margin-right: 5px" :class="'wys- '+sonMenu.icon"></i>
                    {{ sonMenu.menuName }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>-->

              <el-menu-item index="/vacation/list">
                <i class="el-icon-menu"></i>
                <span slot="title">请假管理</span>
              </el-menu-item>
              <el-menu-item index="/attendance/list">
                <i class="el-icon-menu"></i>
                <span slot="title">考勤管理</span>
              </el-menu-item>
             <el-submenu index="2">
                     <template slot="title">
                       <i class="el-icon-location"></i>
                       <span>教务管理</span>
                     </template>
                   <el-menu-item index="/administration/courseArrangement">课程安排</el-menu-item>
                   <el-menu-item index="/administration/result">成绩录入</el-menu-item>
                   <el-menu-item index="/administration/test">考场安排</el-menu-item>
                   <el-menu-item index="/administration/structure">学校架构</el-menu-item>                  
					</el-submenu>
              <HeXing_Card><!--标签内的所有东西勿动-->
                <el-submenu index="1">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>一卡通中心</span>
                  </template>
                  <el-menu-item index="/card/card">校园卡</el-menu-item>
                  <el-menu-item index="/card/cardIn">充值记录</el-menu-item>
                  <el-menu-item index="/card/cardOut">消费记录</el-menu-item>
                  <el-menu-item index="/card/cardInMachine">充值机管理</el-menu-item>
                  <el-menu-item index="/card/cardOutMachine">消费机管理</el-menu-item>
                </el-submenu>
              </HeXing_Card><!--标签内的所有东西勿动-->
              <div>
                <el-submenu index="2">
                  <template slot="title">
                    <i class="el-icon-location"></i>
                    <span>后勤</span>
                  </template>
                  <el-menu-item index="/appointment/list">场地预约</el-menu-item>
                  <el-menu-item index="/area/list">场地</el-menu-item>
                  <el-menu-item index="/dormitory/list">宿舍</el-menu-item>
                  <el-menu-item index="/repd/list">报修记录</el-menu-item>
                  <el-menu-item index="/xjh/visit">游客</el-menu-item>
                  <el-menu-item index="/xjh/callback">反馈</el-menu-item>
                  <el-menu-item index="/xjh/hidden">隐患</el-menu-item>
                </el-submenu>
              </div>


              <!--              <el-submenu v-for="menu in menus" :index="menu.orderNum+'-' ">-->
              <!--                <template slot="title">-->
              <!--                  <i style="margin-right: 8px" :class="'wys- '+menu.icon"></i>-->
              <!--                  <span>{{ menu.menuName }}</span>-->
              <!--                </template>-->
              <!--                <el-menu-item-group v-for="sonMenu in menu.subMenu">-->
              <!--                  <el-menu-item :index="sonMenu.url">-->
              <!--                    <i style="margin-left: 28px;margin-right: 5px" :class="'wys- '+sonMenu.icon"></i>-->
              <!--                    {{ sonMenu.menuName }}-->
              <!--                  </el-menu-item>-->
              <!--                </el-menu-item-group>-->
              <!--              </el-submenu>-->

            </div>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-main style="padding:10px">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <div id="admin" :style="admin" @mouseenter="footerEnter()" @mouseleave="footerLeave()">
      <ul>
        <li>
          <el-button type="text" @click="information()" style="margin-bottom:-20px;margin-top:-10px">详细信息
          </el-button>
          <el-dialog title="详细信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
              <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="电话" :label-width="formLabelWidth">
                <el-input v-model="form.phone" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="注册时间" :label-width="formLabelWidth">
                <el-input v-model="form.updateTime" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="照片" :label-width="formLabelWidth">
                <el-input v-model="form.img" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.account" autocomplete="off"></el-input>
              </el-form-item>

              <el-form-item label="角色" :label-width="formLabelWidth">
                <el-input v-model="form.role.name" autocomplete="off"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
          </el-dialog>
        </li>
        <li>
          <router-link :to="'/index/Password'">
            <el-button type="text" style="margin-bottom:-10px;margin-top:-10px">修改密码
            </el-button>
          </router-link>
        </li>
        <li>
          <el-button type="text" @click="logout" style="margin-bottom:-10px;margin-top:-10px">退出登录
          </el-button>
        </li>
      </ul>
    </div>
  </el-container>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      menus: {},
      active: "",
      active1: "",
      admin: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        name: '',
        phone: '',
        area: '',
        updateTime: '',
        account: '',
        password: '',
        img: '',
        role: '',
      },
      formLabelWidth: '120px'
    };

  },
  methods: {
    footerEnter() {
      this.active = "display:block";
      this.active1 = "display:none";
      this.admin = "display:block";

    },
    footerLeave() {
      this.active = "display:none";
      this.active1 = "display:block";
      this.admin = "display:none";

    },
    information() {
      let jwt = localStorage.getItem("jwt");
      this.$axios({
        method: 'post',
        url: "http://localhost:8080/api/v1/propertyStaff/getById",
        data: jwt,
      }).then((r) => {
        console.log(r);
        if (r.data.code == 200) {
          this.form = r.data.data;
        }
      })
      this.dialogFormVisible = true;

    },
    logout() {
      this.$confirm('此操作将退出登录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '退出成功!'
        });
        localStorage.clear();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
  },
  created() {
    this.active = "display:none";
    this.admin = "display:none";
    this.$axios({
      method: 'post',
      url: "http://localhost:8080/api/v1/menu/list",
    }).then((r) => {
      if (r.data.code == 200) {
        this.menus = r.data.data;
        console.log(this.menus);
      }
    })
  },
};
</script>


<style>
.el-header,
.el-footer {
  /* background-color: #9fe6af; */
  background-image: url('@/assets/css/img/bg.jpeg');
  color: rgb(51, 51, 51);
  text-align: center;
  line-height: 70px;
}

.el-aside {
  /* background-color: #b8edcc; */
  color: rgb(51, 51, 51);
  text-align: center;
  line-height: 700px;
}

/*.el-main {*/
/*  !* background-color: #b8edcc; *!*/
/*  color: rgb(51, 51, 51);*/
/*  text-align: center;*/
/*  line-height: 700px;*/
/*}*/

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 700px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 700px;
}

.size {
  font-size: 20px;
}

#head {
  height: 70px;
  text-align: center;
  /* background-image: url('@/assets/css/img/bg1.jpg'); */
}

#left {
  height: 70px;
  width: 20%;
  float: left;
  text-align: center;
  line-height: 70px;
}

#right {
  height: 70px;
  width: 322px;
  float: right;
  /* text-align: center; */
}

#right1 {
  height: 70px;
  width: 40px;
  float: left;
  text-align: center;
}

#right2 {
  height: 70px;
  /* width: 150px; */
  float: left;
  text-align: left;
}

#right3 {
  position: relative;
  height: 70px;
  width: 160px;
  float: right;
  /* border: 1px solid red; */
  text-align: left;
}

#right31 {
  position: absolute;
  left: 20px;
  /* border:1px solid red; */
}

#right32 {
  position: absolute;
  width: 50px;
  right: 50px;
  /* border: 1px solid blue; */
}

#right33 {
  position: absolute;
  width: 30px;
  right: 20px;
  margin-top: 5px;
  /* border: 1px solid blue; */
}

#right34 {
  position: absolute;
  width: 30px;
  right: 20px;
  margin-top: 5px;
  /* border: 1px solid blue; */
}

#mid {
  height: 70px;

  margin: 0;
}

#admin {
  position: absolute;
  width: 120px;
  height: 100px;
  top: 60px;
  right: 50px;
  background-color: white;
  border: 1px solid blue;
}

ul li {
  margin-bottom: 5px;
}

li {
  cursor: pointer;
}
</style>